<script setup>
import Navigator from "@/components/Navigator.vue";

import { RouterLink, RouterView } from "vue-router";
import { createWeb3Modal } from "@web3modal/wagmi/vue";
import { zkSyncSepoliaTestnet, bscTestnet, zkSync } from "viem/chains";

import { EIP6963Connector, walletConnectProvider } from "@web3modal/wagmi";

import { InjectedConnector, configureChains, createConfig } from "@wagmi/core";
import { publicProvider } from "@wagmi/core/providers/public";
import { WalletConnectConnector } from "@wagmi/core/connectors/walletConnect";
// 1获取projectId
const projectId = "03bf3a47ed20c92ea7fc318d61801aaa";

// 2. Configure wagmi client
const { chains, publicClient, webSocketPublicClient } = configureChains(
  [zkSyncSepoliaTestnet, bscTestnet, zkSync],
  [walletConnectProvider({ projectId }), publicProvider()]
);
const metadata = {
  name: "Web3Modal",
  description: "Web3Modal Example",
  url: "https://web3modal.com",
  icons: [
    "https://nftstorage.link/ipfs/bafkreicsbw4womo5365juh4qpsmfmkm2u2l7fbxeaucozvimfmvtw3a56m",
  ],
};

const wagmiConfig = createConfig({
  autoConnect: true,
  connectors: [
    new WalletConnectConnector({
      chains,
      options: { projectId, showQrModal: false, metadata },
    }),
    new EIP6963Connector({ chains }),
    new InjectedConnector({ chains, options: { shimDisconnect: true } }),
  ],
  publicClient,
  webSocketPublicClient,
});

// 3. Create modal
createWeb3Modal({ wagmiConfig, projectId, chains, enableAnalytics: true, themeMode: 'light', themeVariables:{ '--w3m-border-radius-master': '0.01rem','--w3m-z-index': '1100' } });
</script>

<template>
  <!-- <header>
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />

      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
      </nav>
    </div>
  </header> -->
  <Navigator />
  <RouterView />
</template>

<style>
body {

}
a {
  text-decoration: none;
  color: inherit;
}
/*滚动条样式*/
div::-webkit-scrollbar {
  width: 0.05rem;
  height: 0.05rem;
}
div::-webkit-scrollbar-thumb {
  border-radius: 6px;
  box-shadow: inset 0 0 5px #8b8b8b33;
  background: #8b8b8b33;
}
div::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #8b8b8b33;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.1);
}
html::-webkit-scrollbar {
  width: 0.05rem;
  height: 0.05rem;
}
html::-webkit-scrollbar-thumb {
  border-radius: 6px;
  box-shadow: inset 0 0 5px #8b8b8b33;
  background: #8b8b8b33;
}
html::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #8b8b8b33;
  border-radius: 0;
  background: #8b8b8b33;
}
@font-face {
  font-family: 'AlbertSans-Medium'; /* 自定义字体名称 */
  src: url('@/assets/fonts/static/AlbertSans-Medium.ttf') format('truetype'); /* .ttf 字体文件的路径 */
}
body {
  font-family: 'AlbertSans-Medium', sans-serif;
}
</style>
